<template>
  <view class="test-container">
    <view class="header">
      <u-navbar title="UI组件测试" :border-bottom="true"></u-navbar>
    </view>
    
    <view class="content">
      <!-- uView组件测试 -->
      <view class="section">
        <u-text type="primary" size="18" bold text="uView Plus组件测试"></u-text>
        
        <!-- 按钮测试 -->
        <view class="test-item">
          <u-text text="按钮组件测试：" margin="10px 0"></u-text>
          <u-button type="primary" @click="showToast">主要按钮</u-button>
          <u-button type="success" style="margin-left: 10px;">成功按钮</u-button>
        </view>
        
        <!-- 表单测试 -->
        <view class="test-item">
          <u-text text="表单组件测试：" margin="10px 0"></u-text>
          <u-form :model="form" ref="formRef">
            <u-form-item label="用户名" prop="username">
              <u-input v-model="form.username" placeholder="请输入用户名"></u-input>
            </u-form-item>
            <u-form-item label="手机号" prop="phone">
              <u-input v-model="form.phone" placeholder="请输入手机号" type="number"></u-input>
            </u-form-item>
          </u-form>
        </view>
        
        <!-- 地图测试 -->
        <view class="test-item">
          <u-text text="地图组件测试：" margin="10px 0"></u-text>
          <view class="map-container">
            <map
              id="testMap"
              :longitude="mapData.longitude" 
              :latitude="mapData.latitude"
              :scale="mapData.scale"
              :markers="mapData.markers"
              :style="{ width: '100%', height: '300px' }"
              @tap="onMapTap"
            >
              <cover-view class="map-controls">
                <button @click="getCurrentLocation" class="location-btn">获取定位</button>
              </cover-view>
            </map>
          </view>
        </view>
        
        <!-- 测试结果显示 -->
        <view class="test-result">
          <u-text type="success" size="16" :text="testResult"></u-text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

const form = reactive({
  username: '',
  phone: ''
})

const mapData = reactive({
  longitude: 116.397428,
  latitude: 39.90923,
  scale: 16,
  markers: [
    {
      id: 1,
      longitude: 116.397428,
      latitude: 39.90923,
      title: '测试标记',
      iconPath: '/static/logo.png',
      width: 30,
      height: 30
    }
  ]
})

const testResult = ref('组件测试准备就绪...')

const showToast = () => {
  uni.showToast({
    title: 'uView按钮点击成功！',
    icon: 'success'
  })
  testResult.value = '✅ uView按钮组件测试通过'
}

const getCurrentLocation = () => {
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      mapData.longitude = res.longitude
      mapData.latitude = res.latitude
      mapData.markers[0].longitude = res.longitude
      mapData.markers[0].latitude = res.latitude
      
      uni.showToast({
        title: '定位成功！',
        icon: 'success'
      })
      testResult.value = '✅ 地图定位功能测试通过'
    },
    fail: (err) => {
      console.error('定位失败:', err)
      uni.showToast({
        title: '定位失败，请检查权限',
        icon: 'error'
      })
      testResult.value = '❌ 地图定位功能测试失败'
    }
  })
}

const onMapTap = (e) => {
  console.log('地图点击:', e)
  testResult.value = '✅ 地图交互功能正常'
}

onMounted(() => {
  console.log('UI测试页面加载完成')
  testResult.value = '✅ uView Plus组件库集成成功'
})
</script>

<style lang="scss" scoped>
.test-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx;
}

.section {
  background: white;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.test-item {
  margin: 30rpx 0;
  padding: 20rpx;
  border: 1px dashed #e4e7ed;
  border-radius: 8rpx;
}

.map-container {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 8rpx;
  overflow: hidden;
}

.map-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.location-btn {
  background: #007aff;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 12px;
}

.test-result {
  margin-top: 30rpx;
  padding: 20rpx;
  background: #f0f9ff;
  border-radius: 8rpx;
  text-align: center;
}
</style> 